<template>
	<view class="content">
		<u-modal :show="show" :content='content'  :closeOnClickOverlay="true" @confirm="show = false" @close="show = false"></u-modal>
		<u-picker
		 :show="showJob" 
		 :columns="roleList"
		 keyName="role_name"
		 closeOnClickOverlay
		 @cancel="showJob = false"
		 @close="showJob = false"
		 @confirm="_setCurRole"
		 ></u-picker>
		<view class="section-0">
			<view class="top">
				<view class="user-info">
					<view class="logo">
						<image mode="aspectFill" src="../../src/imgs/test.jpg"></image>
					</view>
					<view class="info">
						<view class="name">
							<view class="icon">
								<image mode="aspectFit" src="../../src/imgs/account-icon-user.png"></image>
							</view>
							<text>{{userInfo.nick_name}}</text>
						</view>
						<view class="job">
							<view class="icon">
								<image mode="aspectFit" src="../../src/imgs/account-icon-card.png"></image>
							</view>
							<view class="role" @click="showJob = true">
								{{curRole}}<view class="iconfont icon-xiala"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="section-1 card">
				<view class="count">
					<image src="../../src/imgs/account-risk.png" alt="">
					<view class="desc"><text class="num">0</text><text>个</text></view>
				</view>
				<view class="count">
					<image src="../../src/imgs/account-count.png" alt="">
				</view>
			</view>
			<view class="section-2 card">
				<view :class="`item ${item.disabled ? 'item__disabled': ''}`" v-for="item in list1" :key="item.name" @click="go(item.url)">
					<navigateItem>
						<template slot="left">
							<image mode="aspectFit" class="image-left" :src="item.icon" alt="">
						</template>
						<template slot="content">
							<text>{{item.name}}</text>
						</template>
						<template slot="right">
							<image mode="aspectFit" class="image-right" src="../../src/imgs/account-icon-right.png" alt="">
						</template>
					</navigateItem>
				</view>	
			</view>	
			<view class="section-3 card">
				<view class="item" v-for="item in list2" :key="item.name"  @click="go(item.url)">
					<navigateItem>
						<template slot="left">
							<image mode="aspectFit" class="image-left" :src="item.icon" alt="">
						</template>
						<template slot="content">
							<text>{{item.name}}</text>
						</template>
						<template slot="right">
							<image mode="aspectFit" class="image-right" src="../../src/imgs/account-icon-right.png" alt="">
						</template>
					</navigateItem>
				</view>
			</view>	
			<view class="section-4 card">
				<view class="item" v-for="item in list3" :key="item.name"  @click="go(item.url)">
					<navigateItem >
						<template slot="left">
							<image mode="aspectFit" class="image-left" :src="item.icon" alt="">
						</template>
						<template slot="content">
							<text>{{item.name}}</text>
						</template>
						<template slot="right">
							<image mode="aspectFit" class="image-right" src="../../src/imgs/account-icon-right.png" alt="">
						</template>
					</navigateItem>
				</view>
			</view>	
			<view class="section-5">
				<view class="custom-button" @click="exit()">退出登录</view>
			</view>
		</view>
		<!-- <view class="tab-space"></view>
		<tabbar></tabbar> -->
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/index.vue'
	import { mapGetters, mapActions} from 'vuex';
	import navigateItem from '@/components/navigate_item/index.vue'
	export default {
		components: {
			navigateItem, tabbar
		},
		data() {
			return {
				roleList: [],
				list1: [
					{name: '吐槽', icon: require('@/src/imgs/account-icon-project.png'), disabled: true},
					{name: '我管理的项目', disabled: true,  icon: require('@/src/imgs/account-icon-project.png')},
					{name: '技术支持', icon: require('@/src/imgs/account-icon-tec.png'), url: '/pages/account/tec/index'},
					{name: '修改密码', icon: require('@/src/imgs/account-icon-password.png'), url: '/pages/account/edit_password/index'},
				],
				list2: [
					{name: '应用分享', icon: require('@/src/imgs/account-icon-share.png'), url: '/pages/account/share/index'},
					{name: '缓存清理', icon: require('@/src/imgs/account-icon-clear.png'),  url: 'clear'},
				],
				list3: [
					{name: '关于本平台', icon: require('@/src/imgs/account-icon-about.png'), url: '/pages/account/about/index'},
				],
				show: false,
				showJob: false,
				content: '',
			};
		},
		computed: {
			...mapGetters({ 
				curRole: 'system/getCurRole',
				userInfo: 'system/getUserInfo',
			}),
		},
		methods: {
			...mapActions({ setCurRole: 'system/setCurRole', loginOut: 'system/loginOut', resetCurProject: 'system/resetCurProject'}),
			_setCurRole(e) {
				this.setCurRole(e.value[0]);
				this.showJob = false;
				this.resetCurProject();
			},
			exit() {
				this.loginOut();
			},
			go(url) {
				if (url === 'clear') {
					this.content = '缓存清除成功！';
					this.show = true;
					return;
				}
				uni.navigateTo({
					url,
				});
			}
		},
		onReady() {
			let arr = [];
			arr.push(this.userInfo.role_list);
			this.roleList = arr;
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-picker-view-content>*{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0 10rpx;
		width:calc(100% - 20rpx);
	}
	.tab-space{
		width: 100%;
		height: 140rpx;
	}
	.content{
		.image-left{
			width: 34rpx;
			height: 79rpx;
		}
		.image-right{
			width: 16rpx;
			height: 79rpx;
		}
		.card{
			width: 100%;
			border-radius: 50rpx;
			background-color: #fafbfd;
			padding-top: 50rpx;
			padding-bottom: 20rpx;
			box-shadow: 0rpx -29rpx 58rpx 29rpx rgba(#bcbcb5, 0.19);
		}
		.item{
			margin-bottom: 34rpx;
		}
		.item__disabled{
			/deep/ {
				.left{
					opacity: 0.25;
				}
				.content{
					opacity: 0.25;
				}
				.right{
					opacity: 0.25;
				}
			}
		}
		.section-0{
			width: 100%;
			background-color: #2e5efe;
			.top{
				width: 100%;
				height: 260rpx;
				background-image: url(../../src/imgs/account-top.png);
				background-size: cover;
				background-repeat: no-repeat;
				border-top-left-radius: 50rpx;
				border-top-right-radius: 50rpx;
				overflow: hidden;
				.user-info{
					width: 100%;
					box-sizing: border-box;
					padding-left: 55rpx;
					padding-top: 35rpx;
					padding-bottom: 35rpx;
					.logo{
						width: 140rpx;
						height: 140rpx;
						background-color: #ffffff;
						border-radius: 14rpx;
						box-sizing: border-box;
						padding: 8rpx;
						float: left;
						image{
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}
					.info{
						float: left;
						padding-left: 35rpx;
						.name{
							.icon{
								float: left;
								margin-right: 35rpx;
								image{
									height: 50rpx;
									width: 35rpx;
								}
							}
							width: 100%;
							height: 50rpx;
							font-size: 35rpx;
							line-height: 50rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: #ffffff;
							margin-top: 20rpx;
							margin-bottom: 20rpx;
						}
						.job{
							width: 100%;
							height: 50rpx;
							.icon{
								float: left;
								margin-right: 15rpx;
								width: 35rpx;
								image{
									height: 50rpx;
									width: 35rpx;
								}
							}
							.role{
								float: left;
								line-height: 50rpx;
								height: 50rpx;
								background-color: #ffffff;
								border-radius: 25rpx;
								font-size: 30rpx;
								font-weight: normal;
								font-stretch: normal;
								letter-spacing: 0rpx;
								color: #0535d6;
								padding: 0 20rpx;
								.iconfont{
									float: right;
									position: relative;
									top: 4rpx;
								}
							}
						}
					}
				}
			}
		}
		.section {
			position: relative;
			top: -50rpx;
			z-index: 10;
		}
		.section-1{
			width: 100%;
			box-sizing: border-box;
			padding-left: 40rpx;
			padding-right: 40rpx;
			padding-bottom: 40rpx;
			display: flex;
			justify-content: space-between;
			.count{
				width: 324rpx;
				height: 213rpx;
				position: relative;
				.desc{
					width: 324rpx;
					height: 60rpx;
					z-index: 10;
					text-align: center;
					position: absolute;
					bottom: 25rpx;
					.num{
						font-size: 58rpx;
						font-weight: bold;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #ffffff;
						margin-right: 5rpx;
					}
					text{
						font-size: 26rpx;
						font-weight: normal;
						letter-spacing: 0rpx;
						color: #87c6ff;
					}
				}
				image{
					position: absolute;
					width: 385rpx;
					height: 274rpx;
					top: -18rpx;
					left: -31rpx;
				}
			}
			
		}
		.section-2{
			width: 100%;
		}
		.section-3{
			width: 100%;
		}
		.section-4{
			width: 100%;
		}
	}
</style>
